<template>
	<div>
		<y-shelf title="关于我们">
			<div slot="content">
				<div class="ql-editor">
					<div v-html="aboutUsContent" style="padding: 10px;">

					</div>
				</div>
			</div>
		</y-shelf>
	</div>
</template>
<script>
	// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
	import YButton from '/components/YButton'
	import { upload, updateheadimage, userInfo, getAboutUs } from '/api/index'
	import YShelf from '/components/shelf'
	import vueCropper from 'vue-cropper'
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				aboutUsContent: '',
				root: this.root,
				imgSrc: '',
				editAvatarShow: false,
				cropContext: '',
				cropperImg: '',
				previews: {},
				option: {
					img: '',
					zoom: 0
				},
				fixedNumber: [1, 1],
				example2: {
					info: true,
					size: 1,
					canScale: false,
					autoCrop: true,
					// 只有自动截图开启 宽度高度才生效
					autoCropWidth: 300,
					autoCropHeight: 250,
					// 开启宽度和高度比例
					fixed: true
				},
				UserInfo: {}
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		mounted() {
			this.GetUserInfo()
			console.log('this.userInfo', this.userInfo)
			this._getAboutUs()
		},
		methods: {
			...mapMutations([
				'RECORD_USERINFO'
			]),
			_getAboutUs() {
				let _this = this
				getAboutUs().then(res => {
					console.log('关于我们res', res)
					if(res.code == 200) {
						_this.aboutUsContent = res.data.list[0].Pc
					}
				})
			},
			upimg(e) {
				var file = e.target.files[0]
				if(!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
					alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
					return false
				}
				var reader = new FileReader()
				reader.readAsDataURL(file)
				reader.onload = (e) => {
					this.option.img = e.target.result
				}
			},
			cropper() {
				let me = this
				if(this.option.img) {
					this.$refs.cropper.getCropData((data) => {
						this.imgSrc = data.split(',')[1]
						upload({
							base64: this.imgSrc,
							ext: 'jpg'
						}).then(res => {
							if(res.code === 200) {
								let path = res.data
								updateheadimage(me.UserInfo.Id, {
									HeadImg: path
								}).then(res1 => {
									if(res1.code === 200) {
										let info = me.userInfo
										info.info.HeadImg = path
										me.RECORD_USERINFO({
											info: info.info
										})
										me.editAvatarShow = false
									}
								})
							}
						})
					})
				} else {
					alert('别玩我啊 先选照骗')
				}
			},
			editAvatar() {
				this.editAvatarShow = true
			},
			realTime(data) {
				this.previews = data
				let w = 100 / data.w
				this.option.zoom = w
			},
			GetUserInfo() {
				let me = this
				userInfo().then(res => {
					console.log('获取个人信息res', res)
					if(res.code === 200) {
						me.UserInfo = res.data.list[0]
					}
				})
			},
			editUserName() {
				let me = this
				updateheadimage(me.UserInfo.Id, {
					UserName: me.userInfo.info.UserName
				}).then(res1 => {
					if(res1.code === 200) {
						let info = me.userInfo
						me.RECORD_USERINFO({
							info: info.info
						})
						me.$message({
							message: '用户名修改成功！',
							type: 'success'
						});
					}
				})
			}
		},
		components: {
			YButton,
			YShelf,
			vueCropper
		}
	}
</script>
<style lang="scss" scoped>
	@import "../../../assets/style/mixin";
	.avatar-box {
		height: 124px;
		display: flex;
		margin: 0 30px 30px;
		border-bottom: #dadada solid 1px;
		line-height: 30px;
		display: flex;
		align-items: center;
		.img-box {
			@include wh(80px);
			border-radius: 5px;
			overflow: hidden;
		}
		img {
			display: block;
			@include wh(100%)
		}
		.r-box {
			margin-left: 20px;
			h3 {
				font-size: 18px;
				font-weight: 400;
				color: #333;
			}
		}
	}
	
	// 修改头像
	.edit-avatar {
		z-index: 9999;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		@include wh(100%);
		background-color: rgba(0, 0, 0, .5);
		@extend %block-center;
		.content {
			display: flex;
			padding: 45px 100px 0;
		}
		>div {
			box-sizing: content-box;
			@include wh(700px, 500px);
			margin: 0;
		}
		.btn {
			width: 80px;
			height: 30px;
			margin-left: 10px;
			position: relative;
			text-align: center;
			line-height: 30px;
			text-shadow: rgba(255, 255, 255, .496094) 0 1px 0;
			border: 1px solid #E6E6E6;
			border-radius: 10px;
			&:hover {}
			a {
				color: #666;
				display: block;
				@include wh(100%);
			}
		}
		input[type=file] {
			position: absolute;
			right: 0;
			left: 0;
			top: 0;
			opacity: 0;
			width: 80px;
			height: 30px;
			cursor: pointer;
			box-sizing: border-box;
			border: 15px solid #000;
			overflow: hidden;
		}
		.edit-l {
			width: 100px;
			text-align: center;
		}
		.edit-r {
			margin-left: 20px;
			flex: 1;
			>div {
				border: 1px solid #ccc;
				width: 320px;
				height: 320px;
			}
		}
	}
	
	.image-container {
		width: 100px;
		height: 100px;
		border: 1px solid #ccc;
	}
	
	.close {
		position: absolute;
		right: 10px;
		top: 0;
		bottom: 0;
		padding: 0 10px;
		@extend %block-center;
		&:hover {
			svg {
				transition: all 1s;
				transform: rotate(360deg);
				transform-origin: 50% 50%;
			}
			path {
				fill: #8a8a8a;
			}
		}
	}
	
	.big {
		display: block;
		width: 320px;
		height: 320px;
	}
	
	.bootom-btn {
		padding: 0 15px;
		border-top: 1px solid #E6E6E6;
		bottom: 0;
		height: 60px;
		right: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.username_wrap {
		display: -ms-flexbox;
		display: flex;
		margin: 0 30px 30px;
		border-bottom: #dadada solid 1px;
		line-height: 30px;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
	}
</style>